<script setup>
import {Search} from "@element-plus/icons-vue";
import {ref} from "vue";
import {AddUserClasses, GetSearchClasses, GetUserClasses, RemoveUserClasses, UpdateUserClasses} from "@/api/index.js";
import moment from "moment";
import {ElMessage, ElMessageBox} from "element-plus";
// 通过输入班级名称 获取班级信息
const search_classes_name = ref('')
// 分页
const total = ref(0);
// 赋值数据
let pageSize = ref(5);
let currentPage = ref(1);
const tableData = ref([]);
const handleGetUserClasses = async (data) => {
  try {
    const res = await GetUserClasses(data)
    total.value = res.count
    tableData.value = res.results
    tableData.value.sort((a, b) => a.id - b.id);
  } catch (error) {
    console.log(error)
  }
}
const handleGetClassesAll = () => {
  currentPage.value = 1;
  handleGetUserClasses({
    page: 1,
    size: pageSize.value
  })
}

const handleCurrentChange = async (val) => {
  currentPage.value = val;
  await handleGetUserClasses({
    page: val,
    size: pageSize.value
  })
}
const handleSearchClassesName = async (data) => {
  data.name = search_classes_name.value
  try {
    const res = await GetSearchClasses(data)
    total.value = res.count
    tableData.value = res.results
  } catch (error) {
    console.log(error);
  }
}
const handleSearchClassesNameBtn = () => {
  currentPage.value = 1
  handleSearchClassesName({
    page: 1,
    size: pageSize.value,
  })
}
const handleAddClasses = () => {
  ElMessageBox.prompt('请输入您要添加的班级名称', '添加班级', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
      .then(async ({value}) => {
        try {
          const res = await AddUserClasses({name: value})
          tableData.value.push(res)
          total.value++
        } catch (error) {
          ElMessage.error('网络错误，请稍后尝试添加班级！')
        }
      })
}
const handleUpdate = (id) => {
  ElMessageBox.prompt('请输入您要修改之后班级的名称', '修改班级信息', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
      .then(async ({value}) => {
        try {
          const res = await UpdateUserClasses({name: value, id})
          const index = tableData.value.findIndex(item => item.id == id)
          tableData.value[index].name = res.name
          ElMessage.success('班级信息修改成功！')
        } catch (error) {
          ElMessage.error('网络错误，请稍后尝试修改班级信息！')
        }
      })
}
const handleDelete = (id) => {
  ElMessageBox.confirm(
      '确定移除此班级吗?',
      '移除班级',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }
  )
      .then(async () => {
        try {
          await RemoveUserClasses(id)
          tableData.value = tableData.value.filter(item => item.id !== id)
          total.value--
          tableData.value.sort((a, b) => a.id - b.id);
        } catch (error) {
          ElMessage.error('网络错误，请稍后尝试删除班级！')
        }
      })

}
handleGetClassesAll()
</script>

<template>
  <div class="search">
    <div class="mt-4">
      <el-input placeholder="请输入班级名称..." v-model="search_classes_name" class="input-with-select">
        <template #prepend>
          <el-button @click="handleGetClassesAll">获取所有</el-button>
        </template>
        <template #append>
          <el-button :icon="Search" @click="handleSearchClassesNameBtn"/>
        </template>
      </el-input>
    </div>
  </div>

  <div class="add">
    <el-button type="primary" @click="handleAddClasses">添加班级</el-button>
  </div>

  <div class="list">
    <el-table :data="tableData" style="width: 800px">
      <el-table-column label="ID" width="120" header-align="center">
        <template #default="scope">
          <span style="margin-left: 40%">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="班级名称" width="200" header-align="center">
        <template #default="scope">
          <span style="margin-left: 30%">{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="180" header-align="center">
        <template #default="scope">
          <span style="margin-left: 10%">{{ moment(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" header-align="center">
        <template #default="scope">
          <div style="margin-left: 30%">
            <el-button size="small" type="info" @click="handleUpdate(scope.row.id)">修改</el-button>

            <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div class="pagination" v-if="total > 0">
    <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next" :total="total"
                   class="mt-4" :current-page="currentPage"/>
  </div>
</template>

<style scoped lang="less">
.search {
  width: 100%;
  margin-left: -60px;

  .mt-4 {
    width: 700px;
    margin: 50px auto;
  }

  .el-input {
    width: 800px;
    margin: auto;
  }
}

.add {
  width: 100%;
  display: flex;
  justify-content: flex-end;

  .el-button {
    margin-right: 450px;
  }
}

.list {
  width: 100%;

  .el-table {
    margin: 20px auto;
  }
}


.pagination {
  width: 100%;

  .el-pagination {
    width: 200px;
    margin: 0 auto;
  }
}
</style>